import React, { memo, useState, useTransition } from "react"
import nameArray from "./nameArray"

const App = memo(() => {
    const [nameList, setNameList] = useState(nameArray)
    const [pending, startTransition] = useTransition()

    function valueChange(e) {
        startTransition(() => {
            setNameList(nameArray.filter((item) => item.includes(e.target.value)))
        })
    }

    return (
        <div>
            <input type="text" onInput={valueChange} />
            <ul>用户列表：{pending && <span>data loading</span>}</ul>
            {nameList.map((item, index) => (
                <li key={index}>{item}</li>
            ))}
        </div>
    )
})

export default App
